Pure.CSS ব্যবহার করে Dropdown Menu তৈরি এবং তার Styling ও Animation করা সহজ। Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক হওয়ায়, এটি দ্রুত ওয়েব ডেভেলপমেন্টে সহায়তা করে, এবং আপনি সহজেই সুন্দর এবং কার্যকরী ড্রপডাউন মেনু তৈরি করতে পারেন। এখানে আমরা Dropdown Menu এর স্টাইলিং এবং অ্যানিমেশন যুক্ত করার জন্য কিছু উদাহরণ দেখব।
১. Basic Dropdown Menu Styling
Pure.CSS-এ একটি সাধারণ ড্রপডাউন মেনু তৈরি করার জন্য আপনাকে কিছু বেসিক স্টাইল প্রয়োগ করতে হবে। আমরা Pure.CSS এর pure-button এবং pure-menu ক্লাস ব্যবহার করে একটি ড্রপডাউন মেনু তৈরি করব।
উদাহরণ: Basic Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Dropdown Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Dropdown Menu Styling */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="pure-button pure-button-primary dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Dropdown: এই ক্লাসটি ড্রপডাউন মেনুর প্রধান কনটেইনারের জন্য।
- Dropdown-content: এটি মেনুর অপশনগুলো ধারণ করে এবং
display: noneদিয়ে প্রথমে এটি হাইড থাকে। - Dropdown:hover: যখন আপনি ড্রপডাউন বাটনে হোভার করবেন, তখন
dropdown-contentমেনু অপশনটি প্রদর্শিত হবে। - pure-button: Pure.CSS এর স্টাইল করা বাটন যা ড্রপডাউন ট্রিগার হিসেবে কাজ করবে।
এটি একটি সিম্পল ড্রপডাউন মেনু তৈরি করবে, যেখানে বাটনে হোভার করলে মেনু অপশনগুলি দেখা যাবে।
২. Dropdown Menu with Animation
এখন, আমরা ড্রপডাউন মেনুর জন্য CSS Animation যোগ করব, যাতে মেনুটি সুন্দরভাবে প্রবাহিত হয়ে প্রদর্শিত হয়।
উদাহরণ: Dropdown Menu with Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Dropdown Menu with Animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
/* Dropdown Menu Styling */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease; /* Animation for opacity */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 1; /* Fade-in effect */
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="pure-button pure-button-primary dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
</body>
</html>
ব্যাখ্যা:
- transition:
transition: opacity 0.3s ease;CSS অ্যানিমেশন যুক্ত করার জন্য ব্যবহৃত হয়েছে, যা মেনু উপাদানটির opacity পরিবর্তন করবে 0.3 সেকেন্ডের মধ্যে। - opacity: ডিফল্টভাবে মেনু আইটেমগুলোর opacity: 0 থাকে, যা লুকানো থাকে। যখন আপনি ড্রপডাউন বাটনে হোভার করবেন, তখন opacity: 1 হয়ে যাবে এবং মেনুটি ধীরে ধীরে দৃশ্যমান হবে।
- :hover: যখন ব্যবহারকারী ড্রপডাউন বাটনে হোভার করে, তখন dropdown-content মেনু অপশনগুলি প্রদর্শিত হবে এবং সুন্দরভাবে ফেইড ইন (ধীরে ধীরে প্রদর্শিত হবে) হবে।
এটি একটি fade-in animation যোগ করবে, যা ড্রপডাউন মেনু অপশনগুলোকে ধীরে ধীরে প্রদর্শন করবে।
৩. Dropdown Menu with Hover and Click Trigger
ড্রপডাউন মেনুর ক্ষেত্রে আপনি কেবল hover নয়, বরং click এর মাধ্যমে মেনু দেখানোর কার্যকলাপও করতে পারেন। এই উদাহরণে, মেনু শুধু তখনই প্রদর্শিত হবে যখন ব্যবহারকারী ড্রপডাউন বাটনে ক্লিক করবে।
উদাহরণ: Dropdown Menu with Click Trigger
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure.CSS Dropdown Menu with Click Trigger</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown content when clicked */
.dropdown.show .dropdown-content {
display: block;
}
.dropdown.show .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="pure-button pure-button-primary dropbtn" onclick="toggleDropdown()">Dropdown</button>
<div class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
<a href="#">Option 3</a>
</div>
</div>
<script>
function toggleDropdown() {
var dropdown = document.querySelector('.dropdown');
dropdown.classList.toggle('show');
}
</script>
</body>
</html>
ব্যাখ্যা:
- .dropdown.show .dropdown-content: ক্লিক করার পরে
showক্লাস যোগ হয়ে গেলে, মেনু অপশনগুলো প্রদর্শিত হবে। - toggleDropdown(): এটি একটি জাভাস্ক্রিপ্ট ফাংশন, যা ড্রপডাউন বাটনে ক্লিক করলে
showক্লাসটি dropdown কনটেইনারে টগল (যোগ বা মুছে ফেল) করবে। - pure-button: Pure.CSS এর একটি স্টাইল করা বাটন, যা ড্রপডাউন মেনুর ট্রিগার হিসেবে কাজ করবে।
এখানে, মেনু click ইভেন্ট দ্বারা ট্রিগার হচ্ছে, এবং মেনুটি শুধুমাত্র ক্লিকের মাধ্যমে প্রদর্শিত হচ্ছে।
Pure.CSS দিয়ে ড্রপডাউন মেনু তৈরি এবং স্টাইলিং করা খুবই সহজ এবং দ্রুত। আপনি hover বা click ইভেন্ট ব্যবহার করে ড্রপডাউন মেনু তৈরি করতে পারেন এবং CSS Animation এর মাধ্যমে সুন্দর অ্যানিমেশন যোগ করতে পারেন। Pure.CSS এর সাথে এই ধরনের কার্যকারিতা অন্তর্ভুক্ত করার ফলে আপনার ওয়েব পেজে ব্যবহারকারীর জন্য সুন্দর এবং ইন্টারঅ্যাকটিভ নেভিগেশন তৈরি করা সম্ভব।
Read more
